<template>
	<div class="box"></div>
	<div class="table">
		<div class="table-elem">1</div>
		<div class="table-elem">2</div>
		<div class="table-elem last">3</div>
		<div class="table-elem last">4</div>
	</div>
	<Row>
		<Button type="default" @click="add">操作</Button>
	</Row>
</template>
<script>
export default {
	data() {
		return {
			a: 1,
			b: 2
		}
	},
	methods: {
		add() {
			console.log(`helloworld`);
		}
	}
}
</script>
<style lang="scss" scoped>
.table {
	display: grid;
	grid-template-columns: repeat(2, 30px);
	&-elem {
		aspect-ratio: 1 / 1;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		&:nth-child(2n), &.last {
			&:after {
				display: none;
			}
		}
		&:after {
			content: '';
			position: absolute;
			width: 100%;
			aspect-ratio: 1/1;
			border: 1px solid #000;
			left: 50%;
			top: 50%;
			pointer-events: none;
		}
	}
}
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
</style>